<template>
  <div>
    <el-container>

      <el-header class="header">
        <div class="title">云办公</div>
        <div>
          <el-button
            type="text"
            icon="el-icon-bell"
            style="color:black;margin-right:8px"
            @click="goChat"
          ></el-button>
          <el-dropdown
            trigger="click"
            @command="commandHandler"
          >
            <span class="el-dropdown-link">
              {{admin.name}}<i><img
                  class="userFace"
                  :src="admin.userFace"
                  align="absmiddle"
                /></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="adminInfo">个人中心</el-dropdown-item>
              <el-dropdown-item command="setting">设置</el-dropdown-item>
              <el-dropdown-item command="logout">注销登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>

      <el-container>
        <el-aside width="200px">
          <el-menu
            router
            unique-opened=""
          >
            <el-submenu
              :index="index+''"
              v-for="(route,index) in routes"
              :key="index"
              v-if="!route.hidden"
            >
              <template slot="title">
                <i
                  :class="route.iconCls"
                  style="color:#1accff"
                ></i>
                <span>{{route.name}}</span>
              </template>
              <el-menu-item
                v-for="(childrenRoute,i) in route.children"
                :key="i"
                :index="childrenRoute.path"
              >{{childrenRoute.name}}</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>

        <el-main>
          <el-breadcrumb
            separator-class="el-icon-arrow-right"
            v-if="this.$router.currentRoute.path != '/home'"
          >
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{this.$router.currentRoute.name}}</el-breadcrumb-item>
          </el-breadcrumb>

          <div
            class="welcome"
            v-if="this.$router.currentRoute.path == '/home'"
          >欢迎使用云办公系统</div>

          <router-view class="router-view" />
        </el-main>

      </el-container>

    </el-container>
  </div>
</template>


<script>
export default {

  name: 'Home',

  data() {
    return {

    }

  },

  methods: {
    commandHandler(command) {
      if (command == 'logout') {
        this.$confirm(`确认注销登录?`, '提示', { type: 'warning' }).then(() => {
          this.postRequest('logout').then(resp => {
            if (resp) {
              //删除token
              window.sessionStorage.removeItem('tokenStr')
              //删除登录用户信息
              window.sessionStorage.removeItem('admin')
              //清除菜单数据
              this.$store.commit("initRoutes", []);
              //跳转到登录页
              this.$router.replace('/')
            }
          })
        }).catch(() => {
          this.$message.info('已取消')
        })

      }

      if (command == 'adminInfo') {
        this.$router.push('/adminInfo')
      }
    },

    goChat() {
      this.$router.push('/chat')
    }
  },
  computed: {
    routes() {
      return this.$store.state.routes
    },
    admin() {
      return this.$store.state.loginAdmin
    }
  }
}
</script>


<style scoped>
.header {
  background-color: rgba(0, 136, 255, 0.803);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.title {
  font-family: 华文楷体;
  font-size: 30px;
  color: aliceblue;
}
.userFace {
  width: 45px;
  height: 45px;
  border-radius: 45px;
  margin-left: 10px;
}
.welcome {
  color: rgba(0, 155, 245, 0.604);
  font-size: 40px;
  font-family: 华文楷体;
  text-align: center;
  margin: 50px;
}
.router-view {
  margin-top: 10px;
}
</style>